<!-- src/components/FileTableView.vue -->
<template>
    <a-table :dataSource="filteredFiles" :columns="columns" :rowKey="record => record.id" :bordered="false"
        :pagination="false" :customRow="() => ({ style: { cursor: 'pointer' } })"
        @change="(pagination, filters, sorter) => handleTableChange(pagination, filters, sorter)">
        <!-- 自定义名称列渲染 -->
        <template #bodyCell="{ column, record }">
            <div v-if="column.dataIndex === 'name'" class="table-file-item"
                :class="{ 'table-file-item-selected': selectedFiles.includes(record.id) }"
                @click.stop="handleFileClick(record, $event)">
                <div class="file-item-table-content">
                    <div class="file-icon" style="display: flex; align-items: center;">
                        <img :src="getFileIcon(record.type)" :alt="record.type" width="24" height="24"
                            class="table-view-icon" />
                    </div>
                    <div class="file-name-text">{{ record.name }}</div>
                </div>
            </div>
        </template>
    </a-table>
</template>

<script>
export default {
    name: 'FileTableView',
    props: {
        filteredFiles: {
            type: Array,
            required: true
        },
        columns: {
            type: Array,
            required: true
        },
        selectedFiles: {
            type: Array,
            required: true
        },
        getFileIcon: {
            type: Function,
            required: true
        },
        handleFileClick: {
            type: Function,
            required: true
        },
        handleTableChange: {
            type: Function,
            required: true
        }
    }
};
</script>

<style scoped>
.table-file-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-file-item:hover {
    background-color: #f5f5f5;
}

.table-file-item-selected {
    background-color: #e6f7ff;
    border-color: #1890ff;
}

.table-file-item,
.table-file-item * {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.file-item-table-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.file-item-table-content .file-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.file-item-table .file-icon img.table-view-icon {
    width: 24px;
    height: 24px;
    transition: none !important;
    filter: none !important;
    transform: scale(1) !important;
}
</style>